<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="css/Shopping.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/distpicker/2.0.1/distpicker.js"></script>
  <script src="js/Shopping.js"></script>
  <script>

    $(function (){
      let shanping=  JSON.parse(localStorage.getItem('shanping')||"[]");
          $('.Shopping-jixugouwu').children('ul').children('li:eq(0)').on('click',function (){
            if (confirm('您确定要清空购物车吗?')){
              localStorage.removeItem('shanping')
              $(".Shopping-zongjia").children().remove()
            }
          })
    $('.dianji').on('click',function (){
      var fenm=$('.middle').children('li:eq(0)').data("xiao")
      if(fenm!=""){
        $('#exampleModal').modal("show")
      }else {
        if (confirm("您还未登录，请先登录")){
          location.href="${pageContext.request.contextPath}/login.jsp"
        }else {
          alert("不登陆，将无法享受全部服务")
        }
      }
    })
    $('#shouhuo').on('click',function (){
      var Str=""
      //拼接收货地址
      var cheng=$('.modal-body').children('form').children('div:eq(1)').children('textarea').val();
      for (let i = 0; i < $('.modal-body').children('form').children('div:eq(0)').children('select').length; i++) {
        Str+=$('.modal-body').children('form').children('div:eq(0)').children('select').eq(i).val();
      }
      Str+=" "
      Str+=$('.modal-body').children('form').children('div:eq(1)').children('textarea').val();

      localStorage.setItem('shouhuo',JSON.stringify(Str))


      //拼接收货地址结束
      var zo= $('.Shopping-jixugouwu').children('ul').children('li:eq(2)').text()
      var zongmiqge=zo.split(":")[1]
      if (cheng!=""){
        location.href="${pageContext.request.contextPath}/indexsp.jsp?sp="+zongmiqge
        $('#exampleModal').modal("hide")
      }else {
        alert("请输入详细地址")
      }

    })
      var stri= window.location.search;
      var fenm=$('.middle').children('li:eq(0)').data("lim")
      if (stri!=""){
        var str1= stri.split("&")
        var ge=str1[1].split("=")
        var shouhuo= JSON.parse(localStorage.getItem('shouhuo')||"[]");
        if (ge[1]!=null){
          $.post("${pageContext.request.contextPath}/settlementServlet",{shp:JSON.stringify(shanping),user:fenm,len:shanping.length,shou:shouhuo},function(result){
            if (JSON.parse(result.message)){
              $('.Shopping-zongjia').text("");
              $('#qink').text("已选： 0件商品")
              $('#yingfu').text("应付总额: 0.00")
              $('.Shopping-libiao').children('ul:eq(1)').css('display','none')
              localStorage.removeItem('shanping')
              localStorage.removeItem('shouhuo')
              var indexqi;
                indexqi= setInterval(function (){
                alert("购买成功，可以去个人中心查看个人订单")
                clearInterval(indexqi)
              },1500)
            }
          });
        }
      }

    })

    function chufa(){
      window.open("${pageContext.request.contextPath}/userListServlet")
      window.close()
    }
    function youhui(shopId){
      alert(shopId)
    }
    function ger(){
      location.href="${pageContext.request.contextPath}/Personal.jsp"
    }

  </script>
</head>
<body>
<div class="max">
  <div class="da">
    <ul class="middle">
      <c:if test="${sessionScope.usersList.user_pur!=null}">
        <li data-lim="${sessionScope.usersList.user_pur}">${sessionScope.usersList.account} 欢迎您</li>
      </c:if>
      <c:if test="${sessionScope.usersList.user_pur==null}">
        <li data-lim="${sessionScope.usersList.user_pur}">回头鱼商城 欢迎您!</li>
      </c:if>
    </ul>
    <ol class="order">
      <li style="cursor: pointer" onclick="ger()">个人中心</li>
      <li>
        <img src="img/people.gif" alt="">
        在线客服</li>
      <li>客服热线:<span>400-6699-840</span></li>
    </ol>
  </div>

  <img class="Shopping-tupian" src="img/logo.gif" alt="">

  <div class="Shopping-libiao">
    <ul>
      <li>全选</li>
      <li>商品</li>
      <li>标题</li>
      <li>数量</li>
      <li>单价</li>
      <li>小计</li>
      <li>操作</li>
    </ul>
    <ul>
      <li><input type="checkbox" checked></li>
      <li>回头鱼全球购</li>
    </ul>
    <div class="Shopping-zongjia">

    </div>
    <div class="Shopping-jixugouwu">
      <button onclick="chufa()">继续购物</button>
      <ul>
        <li style="cursor: pointer">清空购物车</li>
        <li id="qink"></li>
        <li id="yingfu"></li>
        <li class="dianji" style="cursor: pointer">去结算</li>
      </ul>
    </div>
    <div class="Shopping-jiinri">
      <div class="Shopping-ke">一起购买有优惠</div>
    </div>
    <div class="Shopping-zuihong">
      <ul>
        <c:forEach items="${requestScope.commgroup}" var="comm" varStatus="s">
          <c:if test="${s.index<10}">
        <li>
          <img src="${comm.home}" alt="">
          <p>${comm.name}</p>
          <div>
            原价：￥${comm.price}
            <img onclick="youhui(${comm.shopId})" src="img/购物车图标.png" alt="">
          </div>
          <div>
            <c:set var="rand"><%= java.lang.Math.round(java.lang.Math.random() * (30 + 1 -10) +10) %></c:set>
            随机立减：${rand}
          </div>
        </li>
        </c:if>
        </c:forEach>
      </ul>
    </div>
  </div>

  <div class="yang">
    <div class="yang-shi"></div>
    <ul>
      <li>网站简介</li>
      <li>联系我们</li>
      <li>招商合作</li>
      <li>用户协议</li>
      <li>隐私政策</li>
      <li>投诉建议</li>
    </ul>

    <p>Copyright 2012 - 2021 www.huitouyu.com. All rights reserved. 回头鱼商城版权所有</p>

    <div class="pao">
      <div class="pei"><img src="img/yin.png" alt=""></div>
      <div class="pei11"><img src="img/zhi.png" alt=""></div>
      <div class="pei11"><img src="img/wang.png" alt=""></div>
      <div class="pei11"><img src="img/zhong.png" alt=""></div>
      <div class="pei11"><img src="img/360.png" alt=""></div>
    </div>
  </div>

  <%--模态框--%>
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content" style="width: 600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">请输入您的收货地址</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div data-toggle="distpicker" data-autoselect="3">
              <select v-model="work.province"></select>
              <select v-model="work.city"></select>
              <select v-model="work.area"></select>
            </div>

            <div class="form-group" style="margin-top: 10px;font-weight: bold">
              <label for="exampleFormControlTextarea1">详细地址</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" id="shouhuo" class="btn btn-primary">确定收货地址</button>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
</html>